// 等待页面加载完成
$(document).ready(function () {
    予清空()
    观dom()
});

function 予清空() {
    // 查找所有 input 元素
    $('input[type="text"], input[type="number"], input[type="password"]').each(function () {
        var $input = $(this);

        // 跳过已经添加了清空按钮的输入框
        if ($input.data("clearable-added")) {
            return;
        }

        // 标记为已处理
        $input.data("clearable-added", true);

        // 为输入框添加相对定位，以便按钮可以绝对定位
        if ($input.css("position") === "static") {
            $input.css("position", "relative");
        }

        // 创建清空按钮（使用 Bootstrap 图标）
        var $clearButton = $('<button type="button" class="clear-input-btn btn btn-sm">')
            .html('<i class="bi bi-x-circle"></i>') // Bootstrap 清除图标
            .css({
                position: "absolute",
                left: "50%", // 定位到水平中心
                transform: "translateX(-50%)", // 水平居中调整
                top: "-20px", // 输入框上方间距
                display: "none",
                zIndex: 100,
                padding: "0",
                width: "24px",
                height: "24px",
                lineHeight: "24px",
                textAlign: "center",
                cursor: "pointer",
                color: "#6c757d", // Bootstrap 灰色主题色
                background: "white",
                border: "1px solid #dee2e6", // Bootstrap 边框颜色
                borderRadius: "4px", // 匹配 Bootstrap 圆角
                boxShadow: "0 2px 4px rgba(0, 0, 0, 0.1)", // 阴影效果
            })
            .insertAfter($input);

        // 输入框获取焦点时
        $input.on("focus", function () {
            if ($input.val()) {
                $clearButton.show();
            }
        });

        // 输入框失去焦点时
        $input.on("blur", function () {
            setTimeout(function () {
                if (!$clearButton.is(":hover")) {
                    $clearButton.hide();
                }
            }, 100);
        });

        // 按钮悬停时保持显示
        $clearButton.on("mouseenter", function () {
            $clearButton.show();
            $(this).css("color", "#495057"); // 悬停时加深颜色
        });

        // 按钮离开时检查是否应该隐藏
        $clearButton.on("mouseleave", function () {
            if (!$input.is(":focus")) {
                $clearButton.hide();
                $(this).css("color", "#6c757d"); // 恢复默认颜色
            }
        });

        // 值变化时更新按钮显示状态
        $input.on("input", function () {
            if ($input.val()) {
                $clearButton.show();
            } else {
                $clearButton.hide();
            }
        });

        // 点击清空按钮
        $clearButton.on("click", function (e) {
            e.stopPropagation();
            $input.val("").trigger("change");
            $clearButton.hide();
        });
    });
}

// 监听 DOM 变化，为动态添加的输入框也添加清空按钮
function 观dom() {
    var observer = new MutationObserver(function (mutations) {
        mutations.forEach(function (mutation) {
            if (mutation.addedNodes.length) {
                $(mutation.addedNodes)
                    .find('input[type="text"], input[type="number"], input[type="password"]')
                    .each(function () {
                        予清空();
                    });
            }
        });
    });

    var config = {
        childList: true,
        subtree: true,
    };

    observer.observe(document.body, config);
}